<template>
    <div>
        <div class="card" >
            <div class="card-header">
                重命名图片
            </div>
            <div class="card-body p-0" :style="{background: `url(${image.baseInfo.src}) center center / cover no-repeat`}">
                <image-base-info :image="image" style="background: rgba(255, 255, 255, 0.5);" class="p-2 m-0"></image-base-info>
            </div>
        </div>
        <name-picker title="" :value="image.baseInfo.name" :callback="callback" @close="$emit('close')"></name-picker>
    </div>
</template>

<script type="text/javascript">
import namePicker from "./name-picker"
import imageBaseInfo from './image-baseInfo'

export default {
    components: {namePicker, imageBaseInfo},
    inheritAttrs: false,
    props: {
        image: {
            type: Object,
            required: true
        },
        callback: {
            type: Function,
            required: true
        }
    }
}

</script>